<template>
    <div id="box">
        <div class="total">
            <span>播放全部(共{{ count }}首)</span>
        </div>
        <ul>
            <li v-for="(data, index) in dataList" :key="data.id">
                <div class="message">
                    <h5>{{ data.name }}</h5>
                    <p>{{ data.artists[0].name }}</p>
                </div>
                <div class="play">
                    <i class="iconfont icon-Play" title="播放" @click="handleClick(index)"></i>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    beforeMount() {
        axios({
            url: `https://autumnfish.cn/search?keywords=${this.words}`,
            method: 'GET',
            withCredentials: false
        }).then(res => {
            this.count = res.data.result.songCount;
            this.dataList = res.data.result.songs;

            const songs = [];
            res.data.result.songs.forEach(item => {
                const obj = {};
                axios({
                    url: `https://autumnfish.cn/song/detail?ids=${item.id}`,
                    method: 'GET',
                    withCredentials: false
                }).then(res => {
                    obj.cover = res.data.songs[0].al.picUrl;
                })
                axios({
                    url: `https://autumnfish.cn/song/url?id=${item.id}`,
                    method: 'GET',
                    withCredentials: false
                }).then(res => {
                    obj.content = res.data.data[0].url;
                })
                obj._id = item.id;
                obj.name = item.name;
                obj.album = item.album.name;
                obj.singer = item.artists[0].name;
                songs.push(obj);
            })
            this.songs = songs;
        })
    },
    data() {
        return {
            count: 0,
            dataList: [],
            songs: []
        }
    },
    props: ['words'],
    watch: {
        words(newVal) {
            axios({
                url: `https://autumnfish.cn/search?keywords=${newVal}`,
                method: 'GET',
                withCredentials: false
            }).then(res => {
                this.count = res.data.result.songCount;
                this.dataList = res.data.result.songs;

                const songs = [];
                res.data.result.songs.forEach(item => {
                    const obj = {};
                    axios({
                        url: `https://autumnfish.cn/song/detail?ids=${item.id}`,
                        method: 'GET',
                        withCredentials: false
                    }).then(res => {
                        obj.cover = res.data.songs[0].al.picUrl;
                    })
                    axios({
                        url: `https://autumnfish.cn/song/url?id=${item.id}`,
                        method: 'GET',
                        withCredentials: false
                    }).then(res => {
                        obj.content = res.data.data[0].url;
                    })
                    obj._id = item.id;
                    obj.name = item.name;
                    obj.album = item.album.name;
                    obj.singer = item.artists[0].name;
                    songs.push(obj);
                })
                this.songs = songs;
            })
        }
    },
    methods: {
        handleClick(index) {
            this.$store.commit('changeCurrentSongList', this.songs);
            let currentSong = this.songs[index];
            this.$store.commit('togglePlay', true);
            this.$store.commit('initCurrentSongIndex', index);
            this.$store.commit('changeCurrentSong', currentSong);
        }
    }
}
</script>

<style lang="scss" scoped>
    #box {
        width: 1200px;
        min-height: calc(100vh - 240px);
        margin: 0 auto;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;

        .total {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            padding: 0 0 0 10px;
            cursor: default;

            span {
                height: 100%;
                padding: 0 7px;
                font-size: 1.2rem;
                line-height: 50px;
            }
        }

        li {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            padding: 0 10px;
            border-top: 1px solid #ccc;
            cursor: default;

            &:nth-child(odd) {
                background-color: rgba($color: #ddd, $alpha: 0.3);
            }

            .message {
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-evenly;
                align-items: center;
                height: 100%;

                h5 {
                    width: 100%;
                    font-size: 1.3rem;
                }

                p {
                    width: 100%;
                    color: #ccc;
                    font-size: 0.9rem;
                }
            }

            .play {
                cursor: pointer;

                i {
                    font-size: 1.8rem;
                }
            }
        }
    }
</style>